<template>
    <!-- 晒单 -->
    <div class="flauntWrapper">
        <div class="flauntContent">

            <!-- 晒单页顶部 -->
            <div class="flauntHeader">
                <div class="flone">
                    让生活更好的N种方法
                </div>

                <div class="fltwo">
                    <span>“</span> 春天不会迟到 <span>”</span>
                </div>

                <!-- 头部图片列表 -->
                <!-- 滑动区域 -->
                <div class="imageList">
                    <!-- 滑块 -->
                    <div class="slibe">
                        <img src="https://yanxuan.nosdn.127.net/a757e17affd4fd1c2d4f248af5c2ed17.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/52d3c78b204682eb04092694c3bed527.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/e20edeb5ddac92ffccc0d313fe375294.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/c1d9171c82c5cc23d1b5a32596e3d62b.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/7187a115d761de7deae88c88a77dec6c.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/fe2ffe7cb72eda99cf2f2006ccbd8221.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/fd1077a39697046ae08c7403a2809134.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/8b00a44fcf09772c74ddb7dcce0e1849.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/8deddb1bd44891adb6fd0e24cb1068e1.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/764d3cef58b8c93f830f08b366e26019.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/f9e483942db461e31881f12d2a47b04d.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                        <img src="https://yanxuan.nosdn.127.net/983f2ef30bf7b6a0c32410c9d583d299.jpg?imageView&quality=70&thumbnail=240y240"
                            alt="">
                    </div>
                </div>


            </div>

            <!-- 列表 -->
            <div class="contentWrapper">
                <div class="title">TA们的严选生活</div>
                <div class="bottomList">
                    <button class="radio" :class="type == 4 ? 'active' : '' " @click="handle" data-type="4">推荐</button>
                    <button class="radio" :class="type == 3 ? 'active' : '' " @click="handle" data-type="3">最新</button>
                    <button class="radio" :class="type == 2 ? 'active' : '' " @click="handle" data-type="2">本月最热</button>
                    <button class="radio" :class="type == 1 ? 'active' : '' " @click="handle" data-type="1">晒单合计</button>
                </div>
                <div class="contentList">
                    <cart v-for="item in navList" :key="item.topicId" :item="item"></cart>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import cart from '@/components/cart/idnex.vue'
import valapi from '@/api/worthbuy';
import { ref, onMounted } from "vue"

onMounted(() => {
    getfindflauntInfo(page.value, size.value, type.value)
})

let page = ref<number>(1)
let size = ref<number>(20)
let type = ref<number>(4)
let navList = ref<any>([])

async function getfindflauntInfo(page: number, size: number, type: number) {
    try {
        let result = await valapi.findflauntInfo({ page, size, type })
            navList.value.push(...result.topicList)

    } catch (error) {
        console.log(error)
    }
}

function handle(event:any){
    type.value = event.target.dataset.type
    navList.value = []
    console.log(page.value)
    getfindflauntInfo(page.value, size.value, type.value)
}


</script>

<style lang="less" scoped>
.flauntWrapper {
    .flauntContent {

        /*头部列表*/
        .flauntHeader {
            width: 10rem;
            height: 6.0256rem;
            background-color: #ffffff;
            margin-bottom: 0.3rem;

            .flone {
                height: 1rem;
                line-height: 1rem;
                font-size: .3733rem;
                color: #7f7f7f;
                text-align: center;
            }

            .fltwo {
                font-size: .4267rem;
                text-align: center;
                margin-bottom: 0.5rem;

                span {
                    font-size: 1rem;
                    height: 1.111rem;

                }
            }

            .imageList {
                width: 10rem;
                height: 3.1997rem;

                .slibe {
                    height: 3.1997rem;
                    display: flex;
                    overflow: auto;

                    img {
                        width: 3.1997rem;
                        height: 3.1997rem;
                        margin: 0 0.13rem;
                        border-radius: 5px;
                    }

                }
            }
        }

        .contentWrapper {
            margin: 0 0.4rem;

            .title {
                width: 9.2rem;
                height: 1.4664rem;
                font-size: 0.426rem;
                line-height: 1.4664rem;
                font-weight: 600;
            }

            .bottomList {
                display: flex;
                justify-content: space-around;
                height: .7692rem;

                .radio {
                    width: 1.9487rem;
                    background-color: #f4f4f4;
                    border: none;
                    font-size: .3733rem;
                }

                .active {
                    border: red 1px solid;
                    border-radius: 25px;
                    color: red;
                }
            }

            .contentList {
                column-count: 2;
                column-gap: 0.2rem;
                column-fill: balance;
            }
        }

    }

    .flauntContent::after {
        content: '';
        display: block;
        clear: both;
    }
}
</style>